<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- vue 借鉴了angularjs的循环 遍历的思想
      v-for="item in list"
      v-for="item of list"
      v-for="(item, index) of list"

      每一次遍历的时候，最好添加一个key属性 (十把锁，十把钥匙，新增一把锁和一把钥匙，如何快速区分 -- 贴标签)
      key属性就类似于标签
      key属性可以取值为 
        数据的唯一字段
        索引值为唯一字段
        如何体现高效： 控制台 给数据的头部添加数据体验 vm.list.unshift()
    -->
    <ul>
      <li v-for="item of list" :key="item">{{ item }}</li>
    </ul>
    <!-- 遍历对象
    v-for="(value, key, index) of obj"
    -->
    <ul>
      <li v-for="(value, key, index) of obj" :key="index">
        {{ key }}: {{ value }}
      </li>
    </ul>
  </div>
</body>
<script src="lib/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      list: [ 'a', 'b', 'c', 'd', 'e'],
      obj: {
        a: 1,
        b: 2,
        c: 3
      }
    }
  })
  console.log(vm)

</script>
</html>